<template>
	<div>
		<!-- 选项卡 -->
		<el-row>
			<el-col :span="4" v-for="(v, i) in StateData" :key="i">
				<el-button :type="v === state ? 'primary' : 'default'" @click="onClick(v)">{{ v }}</el-button>
			</el-col>
		</el-row>
		<!-- 筛选 -->
		<el-row style="margin: 10px">
			<el-col :span="4">
				<el-input v-model="searchValue" placeholder="请输入数据"></el-input>
			</el-col>
			<el-col :span="2">
			</el-col>
			<el-col :span="10">
				<el-date-picker v-model="date" type="daterange" range-separator="To" start-placeholder="Start date"
					end-placeholder="End date" />
			</el-col>
			<el-col :span="4" v-show="currentSelectedID.length">
				<el-button type="danger" @click="onDelete(currentSelectedID)">批量删除</el-button>
			</el-col>
			<el-col :span="4">
				<el-button type="primary">查看图表</el-button>
			</el-col>
		</el-row>
		<!-- 表格 -->
		<el-table :data="list" style="width: 100%" @selection-change="onSelected">
			<el-table-column type="selection"></el-table-column>
			<el-table-column prop="id" label="订单编号" width="180" />
			<el-table-column prop="createTime" label="提交时间" width="180" />
			<el-table-column prop="tel" label="用户账号" />
			<el-table-column prop="price" label="订单金额" />
			<el-table-column prop="payMethod" label="支付方式" />
			<el-table-column prop="state" label="订单状态" />
			<el-table-column label="操作" width="180">
				<template #default="scope">
					<el-button type="success" @click="onEdit(scope.row)">编辑</el-button>
					<el-button type="danger" @click="onDelete(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 弹框组件 -->
		<Dialog :visiable="visiable" @ok-click="onSubmit" @cancel-click="closeDialog">
			<template v-if="currentEditItem">
				<el-form :model="currentEditItem" label-width="120px">
					<el-form-item label="用户账户">
						<el-input v-model="currentEditItem.tel" placeholder="请输入手机号" />
					</el-form-item>
					<el-form-item label="订单金额">
						<el-input v-model="currentEditItem.price" placeholder="请输入金额" />
					</el-form-item>
					<el-form-item label="支付方式">
						<el-radio-group v-model="currentEditItem.payMethod">
							<el-radio label="微信" />
							<el-radio label="支付宝" />
						</el-radio-group>
					</el-form-item>
					<el-form-item label="订单状态">
						<el-radio-group v-model="currentEditItem.state">
							<el-radio label="待付款" />
							<el-radio label="待发货" />
							<el-radio label="已发货" />
							<el-radio label="待收货" />
							<el-radio label="已关闭" />
						</el-radio-group>
					</el-form-item>
				</el-form>
			</template>
		</Dialog>
	</div>
</template>


<script lang="ts" setup>

import { useStore } from 'vuex'
import { RootState, StateType, ListItemState } from '@/store'
import { computed } from '@vue/reactivity';
import { onMounted, ref, watch } from 'vue';
import { debounce } from 'lodash'
import { ElMessage, ElMessageBox } from 'element-plus'
import Dialog from '@/components/dialog/index.vue'
import axios from 'axios'
// 获取仓库
const store = useStore<RootState>()
// 获取仓库数据	
const list = computed(() => store.state.list)
// 选项卡 
const StateData: StateType[] = ['全部订单', '待发货', '待付款', '已完成', '已发货', '已关闭']
const state = ref<StateType>('全部订单')
// 搜索数据
const searchValue = ref('')
// 日期 时间
const date = ref<[string, string]>(['', ''])
// 当前选中的id
const currentSelectedID = ref<string[]>([])
// 当前编辑的数据
const currentEditItem = ref<ListItemState | null>(null)
// 弹框状态
const visiable = ref(false)

// 弹框打开
const openDialog = () => {
	visiable.value = true
}

// 弹框关闭
const closeDialog = () => {
	visiable.value = false
}

// 点击修改弹框确认按钮
const onSubmit = async () => {
	// 请求修改订单接口
	const resp = await axios.post('/api/order/list/edit', currentEditItem.value)
	// 获取接口
	const { code, message } = resp.data;
	// 验证状态码
	if (code === 200) {
		// 友好提示
		ElMessage({ type: 'success', message })
		// 关闭弹框
		closeDialog()
		// 重新请求数据
		fetchOrderList()
	}
}

// 防抖 选项卡点击
const onClick = debounce((v: StateType) => {
	state.value = v;
	fetchOrderList()
}, 200)

// 请求数据函数
const fetchOrderList = () => {
	store.dispatch('fetchOrderList', {
		state: state.value,
		searchValue: searchValue.value,
		date: date.value
	})
}

// 请求删除函数 防抖
const onDelete = debounce((id: string | string[]) => {
	// 出现确认框
	ElMessageBox.confirm(
		'确认要删除吗？（删除不可逆）',
		'删除',
		{
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		}
	).then(() => {
		// 调用仓库方法  该方法返回Promise实例
		store.dispatch('deleteOrderList', { id }).then(message => {
			// 做一个友好提示
			ElMessage({ type: "success", message })
			// 重新请求列表
			fetchOrderList()
		}).catch((error) => {
			ElMessage({ type: "error", message: error })
		})
	}).catch(() => {
		// 做一个友好提示
		ElMessage({ type: "success", message: '取消了删除操作' })
	})


}, 400)

// 选中发生改变函数
const onSelected = (list: ListItemState[]) => {
	// 将所有被选中的id放入一个数组中 保存起来
	currentSelectedID.value = list.map(v => v.id)
}

// 点击编辑按钮
const onEdit = (item: ListItemState) => {
	//对应是引用数据类型
	//需要克隆复制一份, 保证不影响原数据
	currentEditItem.value = { ...item }
	// 打开弹框
	openDialog()
}

// 防抖
// 侦听搜索的数据发生改变
watch(searchValue, debounce(() => {
	// 重新请求数据
	fetchOrderList()
}, 400))

// 防抖
// 侦听搜索的数据发生改变
watch(date, debounce(() => {
	// 重新请求数据
	fetchOrderList()
}, 400))



onMounted(() => {
	// 请求数据
	fetchOrderList()
})


</script>